<template>
	<view class="main-Location">
		<!-- 字母区域 -->
		<view class="Location-Letter">
			<view hover-class="Click-Latter" @tap="getLetter('ScrollTop')">*</view>
			<view v-for="(l,i) in LatterName" :key="i" hover-class="Click-Latter" @tap="getLetter(l)"
				:style="{'color': LetterId === l ? '#19BE6B' : '#000' }">{{l}}</view>
		</view>
 
		<scroll-view scroll-y="true" class="ynq-ScrollView" :scroll-into-view="LetterId">
			<view class="dw">
				<view class="dwCity cz">
					<span class="dwIcon icon"></span><span>{{CityName}}</span>
				</view>
				<view class="cxdw cz" @click="getDw">
					<span class="cxIcon icon"></span><span>重新定位</span>
				</view>
			</view>
			<!-- 城市列表 -->
			<view class="ynq-CityList">
				<block v-for="(item,index) in CityList" :key="index">
					<view class="ynq-CityLetter" :id="item.initial">{{item.initial}}</view>
					<view class="ynq-CityLine">
						<view class="ct" @tap="getStorage(item_city.name)" v-for="(item_city,name_index) in item.list"
							:key="name_index">{{item_city.name}}</view>
					</view>
				</block>
			</view>
		</scroll-view>
	</view>
</template>
 
<script>
	import cityData from '../../utils/city.json'
	export default {
		data() {
			return {
				CityName: '呼和浩特', // 默认城市
				LatterName: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S','T', 'U', 'V', 'W', 'X', 'Y', 'Z'],
				CityList: cityData.city, //引用json数据
				LetterId: '',
			}
		},
		onLoad() {
			this.getDw()
		},
		methods: {
			// 获取定位点
			getLetter(name) {
				this.LetterId = name
				uni.pageScrollTo({
					selector: '#' + name,
					duration: 300
				})
			}, //  跳转城市首字母定位
 
		
            // 或者可以存到storage中 在使用时再uni.getStorage
			getStorage(Name) {
				let pages = getCurrentPages(); // 获取当前页面栈的实例，以数组形式按栈的顺序给出，第一个元素为首页，最后一个元素为当前页面。
				let nowPage = pages[pages.length - 1]; //当前页页面实例
				let prevPage = pages[pages.length - 2]; //上一页页面实例
				let object = {
					city:Name
				};
				prevPage.$vm.otherFun(object)// 給上一頁綁定方法otherFun,傳參object
				uni.navigateBack({
				    delta:1 // 可以不傳delta值，默認為1
				})
			},
			getDw() {
				let that = this
				uni.getLocation({
					type: 'wgs84',
					success: function(res) {
						this.longitude = res.longitude
						this.latitude = res.latitude
						uni.request({
							url: `http://apia.yikeapi.com/geocode/?appid=43656176&appsecret=I42og6Lm&output=json&location=${this.longitude},${this.latitude}`,
					
							success(data) {
								that.CityName = data.data.regeocode.addressComponent.city
							}
						})
					}
				});
			},
 
		},
	}
</script>
<style lang="scss">
	.main-Location {
		height: 100vh;
	}
 
	// 侧边字母选择栏
	.Location-Letter {
		position: fixed;
		right: 5rpx;
		top: 180rpx;
		width: 30rpx;
		z-index: 100;
 
		view {
			display: block;
			width: 30rpx;
			text-align: center;
			height: 35rpx;
			line-height: 35rpx;
			font-size: 12px;
			transition: ease .3s;
			-webkit-transition: ease .3s;
		}
	}
 
	// 城市列表
	.ynq-CityList {
 
		padding: 10px 0;
 
		.ynq-CityLetter {
			line-height: 30rpx;
			height: 40rpx;
			font-size: 16px;
			border-bottom: 1px solid #f7f7f7;
			padding-left: 10rpx;
			color: #909090;
		}
 
		.ynq-CityLine {
			background-color: #fff;
			margin: 20rpx 0px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			flex-wrap: wrap;
			box-sizing: border-box;
			padding: 30rpx 50rpx;
			.ct{
				width: 200rpx;
				height: 80rpx;
				background: #f3f3f3;
				border-radius: 10rpx;
				color: #333333FF;
				text-align: center;
				line-height: 80rpx;
				margin-top: 20rpx;
			}
			
 
		}
	}
	.dw{
		display: flex;
		box-sizing: border-box;
		padding: 0 50rpx;
		.cz{
			width: 200rpx;
			height: 80rpx;
			border-radius: 10rpx;
			color: #6BC665FF;
			line-height: 80rpx;
			margin-top: 20rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			
			.icon{
				display: inline-block;
				background-size: cover;
				background-repeat: no-repeat;
				
			}
			.cxIcon{
				width: 30rpx;
				height: 30rpx;
				background-image: url('/static/cxdw@2x.png');
			}
			.dwIcon{
				background-image: url('/static/icons/ldw.png');
				width: 30rpx;
				height: 30rpx;
			}
		}
		.dwCity{
			background: #E7F5E6;
			
		}
		.cxdw{
			background-color: #f3f3f3;
			margin-left: 80rpx;
		}
		
	}
</style>